<template>
	<view class="container">
		<view class="block">
			<view class="b-left">
				<view class="circle">
					寄
				</view>
			</view>
			<view class="b-right">
				<view class="">
					姓名  12382728817
				</view>
				<view class="">
					四川省成都市 xxxxxxxxxx
				</view>
			</view>
		</view>
		<view class="block">
			<view class="b-left">
				<view class="circle s">
					收
				</view>
			</view>
			<view class="b-right">
				<view class="mesblock">
					收件人信息
				</view>
			</view>
		</view>
		<view class="form">
			<view class="row">
				物品类别：图片
				<view class="f-right">
					∨
				</view>
			</view>
			<view class="row">
				备注：
				<text style="color:'#eee'">
					请输入备注
				</text>
			</view>
		</view>

		<view class="fixed">
			<view class="b-left">
				<checkbox-group>
                    <label>
                        <checkbox value="cb" checked="true" color="#05b316" style="transform:scale(0.7)" />
						我同意 <text class="tiao">《平台规则》</text>
                    </label>
                </checkbox-group>
			</view>
			<view class="b-right">
				提交
			</view>
		</view>
	</view>
</template>

<script>

	export default {

		data() {
			return {
			};
		},

		onLoad() {
		},
		methods: {
		},
	}
</script>

<style lang="scss">
uni-page-wrapper{
	background:#eee
}
.block{
	padding:10px;
	margin:0 0 10px 0;
	display:flex;
	align-items: center;
	background:#fff;
	box-shadow: 1px 1px 5px #ccc;
	.b-left{
		flex:0 0 30px;
	}
	.b-right{
		flex:1;
	}
	.circle{
		width: 25px;
		height: 25px;
		line-height: 23px;
		text-align: center;
		border-radius: 50%;
		color:#fff;
		background: #ff5522;
		&.s{
			background:#05b316;
		}
	}
	.mesblock{
		height: 100px;
		border: 1px dashed #05b316;
		padding-left: 20px;
		line-height: 100px;
	}
}
.form{
	background:#fff;
	box-shadow: 1px 1px 5px #ccc;
	.row{
		border-bottom:1px solid #eee;
		padding:10px;
	}
	.f-right{
		float:right
	}
}
.fixed{
	position: fixed;
	z-index: 999;
	width: 100%;    
    bottom:var(--window-bottom);
	height:40px;
	background: #fff;
	border-top: 1px solid #eee;
	display:flex;
	align-items: center;
	.b-left{
		flex:1;
		font-size:14px;
		.tiao{
			color:#05b316;
		}
	}
	.b-right{
		flex:0 0 80px;
		color:#fff;
		background:#05b316;
		height: 40px;
		line-height: 40px;
		text-align: center;
	}
}
</style>
